<template>
    <div class="listItem" @click="toBaoming">
        <el-image :src="baseUrl+item.image"  fit="cover"></el-image>
        <div class="txt">
            <h3>{{item.title}}</h3>
            <p><i class="el-icon-time"></i>{{item.end_time|subTime}}</p>
            <p><i class="el-icon-map-location"></i>{{item.sponsor}}</p>
        </div>
    </div>
</template>

<script>
    import {subTime} from "@/utils/common";
    export default {
        name: "ViewListItem",
        props:["item"],
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
            }
        },
        filters:{
            subTime
        },
        created() {
        },
        methods:{
            toBaoming(){
                this.$router.push({path: "/activityDetail",query:{id:this.item.id}});
            }
        }
    }
</script>

<style lang="scss" scoped>
.listItem{
    border: 1px solid #ccc;
    margin:13px 0;
    .el-image{
        width: 100%;
        height: 170px;
    }
    .txt{
        line-height: 1.5;
        padding:10px;
        h3{
            margin-bottom: 8px;
            font-size: 15px;
            font-weight: bold;
            overflow: hidden;
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            max-height: 3em;
            height: 3em;
            -webkit-box-orient: vertical;
        }
        p{
            padding: 3px 0;
            color: #666;
            i{
                padding-right: 8px;
            }
        }
    }
}
</style>
